@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (ngm, indicator-content);
$prefix-color: (ngm, color);

@function get-unthemable-tokens() {
  @return (
  );
}

@function get-color-tokens() {
  @return (
    background-color: var(--ngm-color-surface),
    container-rounded: var(--ngm-primary-container-rounded),
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

:host {
  display: flex;
  flex: 1;
  max-width: 100%;
  @include token-utils.create-token-values($prefix, get-token-slots());
}

@include token-utils.use-tokens($prefix, get-token-slots()) {
  :host {
    background-color: var(#{token-utils.get-token-variable(background-color)});
    border-top-left-radius: var(#{token-utils.get-token-variable(container-rounded)});
  }
}

.mat-mdc-card {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;

  .mat-mdc-card-header {
    padding: 10px 10px 0 10px;
  }

  .mat-mdc-card-content {
    padding: 10px;
  }
}

.pac-indicator-app__close {
  @apply bg-white/10;
}

@mixin _bg-surface-container() {
  background-color: var(#{token-utils.get-token-variable(surface-container)});
}

@include token-utils.use-tokens($prefix-color, (surface-container: white, surface-container-low: #{theme('colors.neutral.100')})) {
  .pac-indicator-app__business {
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(#{token-utils.get-token-variable(surface-container-low)});
    
    .title {
      margin-bottom: 0.5rem;
    }
  }
  
  .pac-indicator__comment-input {
    @include _bg-surface-container();
  }
  .pac-indicator__comment-content {
    @include _bg-surface-container();
  }
  .pac-indicator__comment-period {
    @include _bg-surface-container();
  }
  .pac-indicator-app__comment-remove {
    @include _bg-surface-container();
    @apply absolute top-0 right-0;
  }
}

::ng-deep {
  .pac-indicator__period-tag {
    @apply text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-200 dark:hover:bg-white/10 dark:focus:bg-white/20 dark:text-neutral-200;
    &.selected {
      @apply font-extrabold bg-neutral-200 text-neutral-800 dark:bg-white/20 dark:text-neutral-100;
    }
  }
}